<template>
	<view class="filterWrapper">
		<view class="filterItem">
			<text>
				员工编号
			</text>
			<input type="text"  v-model="OperatorCode" placeholder="点击输入员工编号"/>
			<button class="cu-btn stop text-white" @tap="clearFilter(0)">清空</button>
		</view>
		<view class="filterItem">
			<text>
				员工姓名
			</text>
			<input type="text"  v-model="OperatorName"  placeholder="点击输入员工姓名"/>
			<button class="cu-btn stop text-white" @tap="clearFilter(1)">清空</button>
		</view>
		<view class="filterItem">
			<text>
				身份证号
			</text>
			<input type="text"  v-model="IDCard"  placeholder="点击输入身份证号"/>
			<button class="cu-btn stop text-white" @tap="clearFilter(2)">清空</button>
		</view>
		<view class="filterItem">
			<text>
				所属部门
			</text>
			<input type="text" placeholder="点击选择部门" @tap="showModel" disabled :value="DepartmentName"/>
			<button class="cu-btn stop text-white" @tap="clearFilter(3)">清空</button>
		</view>
		<view class="cu-modal" :class="StoreModal ?'show':'hide'">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">部门</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl bg-white">
					<view class="searchStore">
						<input placeholder="请输入部门" placeholder-style="text-align: left; font-size: 14px;" v-model="SearchName" @input="filter"/>
						<button @tap="searchStore">搜索</button>
					</view>
					<view class="StoreListWrap">
						<view v-for="(item,index) in TempEList" :key="index" @tap="selectScanGood(index)">{{item.DepartmentName}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	// import QSpicker from '@/components/QuShe-picker/QuShe-picker.vue'
	import xflSelect from '../../components/xfl-select/xfl-select.vue'
	import * as Api from '@/syApis/syBb/apis.js'
	import * as Api1 from '@/syApis/syDa/syDa.js'
	export default {
		components: {
			// QSpicker,
			xflSelect
		},
		data() {
			return {
				dateSet: {
					dateMode: 3,
					dateFormatArray: ['-', '-', ' ', ':', ':']
				},
				// startAndEndTime: 0,
				startTime: 0,
				endTime: 0,
				dateName: "",
				DepartmentCode: "",
				DepartmentID: "",
				DepartmentName: "",
				IDCard: "",
				GoodsName: "",
				DepartmentList:[],
				Dlist:[],
				DpID:"",
				StoreModal:false,
				SearchName:"",
				TempEList:[],
				OperatorCode:"",
				OperatorName:""
			};
		},
		created() {
			let date = new Date();
			// this.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
			// this.endTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
			this.Get_DepartmentMessage();
		},
		methods: {
			searchStore(){
				let data = {
					detail:{
						value:this.SearchName
					}
				}
				this.filter(data);
			},
			filter(e){
				// console.log(e);
				let tempList = [];
				// console.log(this.DepartmentList);
				this.DepartmentList.forEach((item,index)=>{
					if(item.DepartmentName.indexOf(e.detail.value)>-1){
						tempList.push(item);
					}
				});
				if(tempList.length==0){
					Api.showTip("查无数据");
				}
				this.TempEList = tempList;
			},
			clearFilter(type){
				if(type==0){
					this.OperatorCode = "";
				}else if(type==1){
					this.OperatorName = "";
				}else if(type==2){
					this.IDCard = "";
				}else{
					this.DpID = "";
					this.DepartmentName = "";
				}
			},
			selectScanGood(index){ 
				this.DepartmentCode = this.TempEList[index].DepartmentCode;
				this.DpID = this.TempEList[index].DepartmentID;
				this.DepartmentName = this.TempEList[index].DepartmentName;
				this.hideModal();
			},
			showModel(){
				this.StoreModal = true;
				this.SearchName = "";
				let data = {
					detail:{
						value:this.SearchName 
					}
				}
				this.filter(data);
			},
			hideModal(){
				this.StoreModal = false;
			},
			onNavigationBarButtonTap(e) {
				const index = e.index;
				console.log(index);
				if (index == 0) {
					this.changeDate();
				} else if (index == 1) {
					
				}
			},
			//获取员工部门档案
			Get_DepartmentMessage() {
				let data = {};
				var _this = this;
				Api1.Get_DepartmentMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == '获取登录信息失败') {
			
						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg);
						} else {
							// _this.Dlist = [];
							_this.DepartmentList = res.data.ResultMsg;
							_this.TempEList = res.data.ResultMsg;
							// for (let item in res.data.ResultMsg) {
							// 	// //console.tablele(res.data.ResultMsg)
							// 	_this.Dlist.push(res.data.ResultMsg[item].DepartmentName);
							// }
						}
					} else {
						Api.ShowTip("服务器开小差了");
					}
				})
			},
			//获取选择的部门ID
			getbmtValue(res) {
				for (let item in this.DepartmentList) {
					if (item == res.index) {
						this.DpID = this.DepartmentList[item].DepartmentID;
						console.log(this.DpID)
						this.DpName = this.DepartmentList[item].DepartmentName;
					}
				}
			},
			custormInput() {
				console.log(this);
			},
			//修改数据
			changeDate() {
				var pages = getCurrentPages(),
					prevPage = null;
				if (pages.length > 1) {
					prevPage = pages[pages.length - 2];
				}
				var that = this;
				var filter = "";
				// and [BillNo] like '%2525%'
				if(this.OperatorCode !==""){
					filter +="[OperatorCode] like '%" + this.OperatorCode+"%'" ;
				}
				if(this.OperatorName !==""){
					if(filter==""){
						filter +="[OperatorName] like '%" + this.OperatorName+"%'"
					}else{
						filter +="and [OperatorName] like '%" + this.OperatorName+"%'"
					}
				}
				if(this.IDCard !==""){
					if(filter==""){
						filter +="[IDCard] like '%" + this.IDCard+"%'"
					}else{
						filter +="and [IDCard] like '%" + this.IDCard+"%'"
					}
				}
				if(this.DpID !==""){
					if(filter==""){
						filter +="DepartmentID='" + this.DpID+"'"
					}else{
						filter +=" and DepartmentID='" + this.DpID+"'"
					}
				}
				let data = {
					SelectAll:1,
					Filter:filter,
					// StartDate:this.startTime,
					// EndDate:this.endTime,
					// ClientName:this.ClientName
					OperatorName:this.OperatorName,
					OperatorCode:this.OperatorCode,
					IDCard:this.IDCard,
					DepartmentID:this.DpID,
					// DpName:this.DpName
				};
				this.$eventHub.$emit('fire',data);
				uni.navigateBack({
					delta: 1
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			showQSPicker(res) {
				console.log(res);
			},
			hideQSPicker(res) {

			},
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/static/bbCss/bbFilter.scss'
   // button::after {
   // 	border: none;
   // 	padding: 0px;
   // }
   
   // page {
   // 	width: 100%;
   // 	height: 100%;
   // 	background: #ebebeb;
   // }
   
   // .filterWrapper {
   // 	background: #FFF;
   // 	padding-bottom: 15upx;
   // }
   
   // .title-padding {
   // 	height: var(--status-bar-height);
   // 	background: $bb-bg-color;
   // 	box-sizing: content-box;
   // }
   
   // .filterHeader {
   // 	width: 100%;
   // 	height: 50px;
   // 	line-height: 50px;
   // 	position: relative;
   // 	text-align: center;
   // 	background: $bb-bg-color;
   // 	color: #FFF;
   // 	font-size: 18px;
   // 	background-size: 100%;
   
   // 	.pd {
   // 		display: inline-block;
   // 		position: absolute;
   // 		margin-left: 10px;
   // 		top: 30upx;
   // 		left: 0px;
   // 		font-size: 14px;
   // 		width: 40upx;
   // 		height: 40upx;
   // 		background: url(../../static/back.png) no-repeat;
   // 		background-size: 100%;
   // 	}
   
   // 	.options {
   // 		position: absolute;
   // 		right: 0px;
   // 		top: 10px;
   // 		width: 80px;
   // 		display: flex;
   // 		text-align: right;
   
   // 		.setting {
   // 			width: 30px;
   // 			height: 30px;
   // 			background: url(../../static/sureFilter.png) no-repeat;
   // 			background-size: 30px;
   // 			border: none;
   // 			margin-left: 90upx;
   
   // 		}
   // 	}
   
   // }
   
   // .filterItem {
   // 	height: 120upx;
   // 	line-height: 120upx;
   // 	background: #FFF;
   // 	display: flex;
   // 	flex-direction: row;
   // 	box-sizing: border-box;
   // 	padding-left: 30upx;
   // 	padding-right: 30upx;
   // 	font-size: 32upx;
   // 	background: #FFF;
   
   // 	text {
   // 		flex: 1;
   
   // 		&:last-child {
   // 			text-align: right;
   // 		}
   // 	}
   
   // 	input {
   // 		flex: 1;
   // 		height: 60upx;
   // 		line-height: 60upx;
   // 		margin-top: 50upx;
   // 		border-bottom: 1px solid #ebebeb;
   // 	}
   
   // 	view.selectInput {
   // 		flex: 1;
   // 		height: 60upx;
   // 		line-height: 60upx;
   // 		margin-top: 22upx;
   // 		border-bottom: 1px solid #ebebeb;
   
   // 		input {
   // 			flex: 1;
   // 			height: 40upx;
   // 			line-height: 40upx;
   // 			margin-top: 50upx;
   // 			border-bottom: 1px solid #ebebeb;
   // 		}
   // 	}
   // }
</style>
